<template>
	<div class="base">
		<div
			class="notice"
			:style="{
				color: `${showData.color}`,
				'background-color': `${showData.bgColor}`,
			}"
		>
			<i class="font20 iconfont icon-tongzhi" :style="{ color: `var(${showData.color})` }"></i>
			<span class="overflow-line-clamp-1">
				{{ showData.noticeText ? showData.noticeText : '请填写内容，如果过长，将会在手机上滚动显示' }}
			</span>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
	props: {
		showData: {
			type: Object as any,
			defult: {},
		},
	},
	setup() {
		return {};
	},
});
</script>

<style scoped lang="scss">
.base {
	min-height: 20px;
	.notice {
		display: flex;
		align-items: center;
		padding-left: 10px;

		span {
			padding: 10px;
		}
	}
}
.overflow-line-clamp-1 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
</style>
